<template>
    <el-container>
        <vHeadSpace />
        <el-container>
            <vAsideSpace />
            <el-container>
                <el-main class="main">
                    <div  class="content">
                        <div  style="width: 100%;">
                            <h3 style="text-align: center;margin-top: 0;font-weight: bolder;font-size: 1.5rem">历史告警统计</h3>
                            <!--表格上方的选择布局,日期、等级、查找按钮-->
                            <el-row :gutter="40" style="margin-left: 0;margin-right: 0">
                                <!--日期选择-->
                                <el-col :span="7" style="padding-left: 0">
                                    <label>日期选择：</label>
                                    <div>
                                        <el-date-picker
                                                v-model="chooseTime"
                                                type="datetimerange"
                                                :picker-options="pickerOptions"
                                                format="yyyy-MM-dd"
                                                unlink-panels
                                                range-separator="-"
                                                start-placeholder="开始日期"
                                                end-placeholder="结束日期"
                                                :default-time="['00:00:00', '23:59:59']">
                                        </el-date-picker>
                                    </div>
                                </el-col>
                                <!-- 下拉框 -->
                                <div>
                                    <el-col :span="7">
                                        <label> 所有设备：</label>
                                        <div>
                                            <el-select v-model="hostIds" multiple clearable placeholder="所有设备">
                                                <el-option
                                                        v-for="item in online_host_list"
                                                        :key="item.hostid"
                                                        :label="item.host"
                                                        :value="item.hostid">
                                                </el-option>
                                            </el-select>
                                        </div>
                                    </el-col>
                                </div>
                                <el-col :span="6">
                                    <label style="text-align: left">严重性：</label>
                                    <el-checkbox-group v-model="checkList">
                                        <el-checkbox label="未分类" />
                                        <el-checkbox label="信息类"></el-checkbox>
                                        <el-checkbox label="警告"></el-checkbox>
                                        <el-checkbox label="一般严重" ></el-checkbox>
                                        <el-checkbox label="严重"  ></el-checkbox>
                                        <el-checkbox label="灾难" ></el-checkbox>
                                    </el-checkbox-group>
                                </el-col>

                                <!--查找按钮-->
                                <el-col :span="2" style="padding-top: 30px">
                                    <el-button type="primary" icon="el-icon-search" @click="handleSubmit(false)">查找</el-button>
                                </el-col>
                                <!--对话框，查看详情-->
                                <el-dialog
                                        title="告警详情"
                                        :visible.sync="centerDialogVisible"
                                        width="50%"
                                        center
                                >
                                    <el-row :gutter="20">
                                        <el-col :span="6">
                                            <label>严重性：</label>
                                            <el-tag>{{ severity_detail }}</el-tag>
                                        </el-col>
                                        <el-col :span="6">
                                            <label>问题知晓状态：</label>
                                            <el-tag type="danger">{{ acknowledged_detail }}</el-tag>
                                        </el-col>
                                        <el-col :span="6">
                                            <label>事件的类型：</label>
                                            <el-tag>{{ source_detail }}</el-tag>
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <label>问题描述：</label>
                                        <el-input
                                                v-model="description_detail"
                                                type="textarea"
                                                :rows="4"
                                                placeholder=""
                                                :disabled="true"
                                        />
                                    </el-row>
                                    <el-row>
                                        <label>解决方案：</label>
                                        <el-input
                                                v-model="solution"
                                                type="textarea"
                                                :rows="4"
                                                placeholder=""
                                                :disabled="true"
                                        />
                                    </el-row>
                                    <span slot="footer" class="dialog-footer">
                                        <el-button @click="centerDialogVisible = false">取 消</el-button>
                                        <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
                                    </span>
                                </el-dialog>
                            </el-row>
                            <!-- 表格 -->
                            <el-table
                                    v-loading="pictLoading"
                                    :data="tableData"
                                    :row-style="{height: '52px'}"
                                    style="width: 100%"
                                    element-loading-text="数据正在加载中"
                                    :height="tableHeight"
                                    :cell-style="{padding: '0'}"
                            >
                                <!--prop:对应对象中的键名；label：定义表格中的列名-->
                                <!--max-height属性为 Table 指定最大高度。此时若表格所需的高度大于最大高度，则会显示一个滚动条-->
                                <el-table-column min-width="30px" align="center" prop="sequence" label="序号">
                                    <template slot-scope="scope">
                                        {{ (currentPage - 1) * pageNum + scope.$index + 1 }}
                                    </template>
                                </el-table-column>
                                <el-table-column align="center" prop="host" label="设备名称" />
                                <el-table-column min-width="180px" align="center" prop="name" label="内容" show-overflow-tooltip>
                                    <template slot-scope="scope">
                                        {{scope.row.name}}
                                        <!--<i class="el-icon-question" @click="pushKnowledge(scope.row)"></i>-->
                                    </template>
                                </el-table-column>
                                <el-table-column prop="status" label="状态">
                                    <template slot-scope="scope">
                                        <span style="color: green" v-if="scope.row.status === '已解决'">{{scope.row.status}}</span>
                                        <span v-else style="color: green">{{scope.row.status}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column align="center" prop="severity" label="严重性" />
                                <!--        <el-table-column align="center" prop="acknowledged" label="问题知晓状态" />-->
                                <!--        <el-table-column align="center" prop="source" label="类型" />-->
                                <el-table-column align="center" prop="clock" label="创建时间" />
                                <el-table-column prop="operation" label="操作" align="center" min-width="100">
                                    <template slot-scope="scope">
                                        <el-button-group>
                                            <!--<el-button type="success" @click="insertNewKnowledge(scope.row)" size="mini">新知识录入</el-button>-->
                                            <el-button type="warning" @click="showProblem(scope.row)" size="mini">更多信息</el-button>
                                        </el-button-group>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <!--  推送知识对话框  -->
                            <el-dialog
                                    title="知识推送"
                                    :visible.sync="pushDialogdialogVisible"
                                    width="70%">
                                <el-table
                                        :data="currentPagePush"
                                        width="100%">
                                    <el-table-column type="index" align="center" label="序号" width="50" />
                                    <el-table-column prop="name_" label="知识名称" width="150" align="center" />
                                    <el-table-column prop="type_" label="类型" width="100" align="center" >
                                        <template slot-scope="scope">
                                            {{getKnowledgeType(scope.row.type_)}}
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            prop="label"
                                            label="关键字"
                                            align="center"
                                            width="200">
                                    </el-table-column>
                                    <el-table-column
                                            prop="key_"
                                            label="关联键值或名称"
                                            width="290"
                                            align="center">
                                    </el-table-column>
                                    <el-table-column
                                            prop="resolution"
                                            label="解决方案"
                                            width="120"
                                            align="center">
                                    </el-table-column>
                                    <el-table-column
                                            prop="submit_user"
                                            label="提交者"
                                            width="100"
                                            align="center">
                                    </el-table-column>
                                    <el-table-column
                                            prop="time"
                                            label="提交时间"
                                            width="100"
                                            align="center">
                                    </el-table-column>
                                    <el-table-column
                                            prop="closureDir"
                                            label="附件"
                                            width="120"
                                            align="center">
                                        <template slot-scope="scope">
                                            <el-button type="warning" icon="el-icon-share" size="mini" @click="checkClosure(scope.row)">查看附件</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>

                                <div style="text-align: center;margin-top: 30px;">
                                    <el-pagination
                                            background
                                            layout="prev, pager, next"
                                            :total="push_total"
                                            :page-size="push_page_size"
                                            :current-page="push_knowledge_current_page"
                                            @current-change="push_current_change">
                                    </el-pagination>
                                </div>

                            </el-dialog>
                            <!-- 新增标签弹层 -->
                            <div class="add-form">
                                <el-dialog title="录入新知识"  :visible.sync="addDialogFormVisible" v-if="addDialogFormVisible" width="1000px" :show-close="false">
                                    <el-form :model="addFromData" :rules="rules" ref="addFromData" label-width="100px">

                                        <el-row :gutter="4">
                                            <!--知识的标题-->
                                            <el-col :span="8">
                                                <el-form-item label="标题" prop="knowledgeName" >
                                                    <el-input v-model="addFromData.knowledgeName" placeholder="知识的名称"/>
                                                </el-form-item>
                                            </el-col>
                                            <!--知识的标签-->
                                            <el-col :span="8">
                                                <el-form-item label="标签" prop="labelName">
                                                    <el-input v-model="addFromData.labelName" placeholder="知识的标签"/>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>

                                        <el-row :gutter="4">
                                            <!--知识的类型-->
                                            <el-col :span="8">
                                                <el-form-item label="知识类型" prop="type">
                                                    <el-cascader
                                                            v-model="addFromData.type"
                                                            :options="typeOptions"
                                                            :show-all-levels="false"
                                                            :props="{ expandTrigger: 'hover',
                                                     value: 'typeId',
                                                     label: 'typeName'
                                                     }"
                                                            @change="typeHandleChange">
                                                    </el-cascader>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>

                                        <el-row :gutter="4">
                                            <!--关联的告警key-->
                                            <el-col :span="16">
                                                <el-form-item label="告警键值" prop="alertKey">
                                                    <el-input v-model="addFromData.alertKey" disabled/>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>

                                        <!--解决方案-->
                                        <el-row>
                                            <el-col :span="20">
                                                <el-form-item label="解决方案" prop="description">
                                                    <el-input v-model="addFromData.description" type="textarea" />
                                                </el-form-item>
                                            </el-col>
                                        </el-row>

                                        <!--附件的增加-->
                                        <el-row>
                                            <el-col :span="8">
                                                <el-form-item label="上传附件" prop="description">
                                                    <!--:on-remove="handleRemove"
                                                            :on-preview="handlePreview"
                                                            :on-remove="handleRemove"-->
                                                    <el-upload
                                                            class="upload-demo"
                                                            ref="upload"
                                                            :limit="3"
                                                            multiple
                                                            :action="uploadUrl"
                                                            :on-change="fileChange"
                                                            :on-remove="handleRemove"
                                                            :before-upload="beforeAvatarUpload"
                                                            :before-remove="beforeRemove"
                                                            :file-list="upload.fileList"
                                                            :auto-upload="false">
                                                        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                                                        <!--<el-button style="margin-left: 10px;" size="small" type="success" @click="httpRequest">上传到服务器</el-button>-->
                                                        <div slot="tip" class="el-upload__tip">文件大小不能超过2M</div>
                                                    </el-upload>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                    </el-form>
                                    <div slot="footer" class="dialog-footer">
                                        <el-button @click="addFormCancelClick()">取消</el-button>
                                        <el-button type="primary" @click="submitForm('addFromData')" :disabled="isSearching">确定</el-button>
                                    </div>
                                </el-dialog>
                            </div>
                            <!--  附件列表  -->
                            <div class="closureList">
                                <el-dialog title="附件列表"  :visible.sync="closureDialogvisiable" @close="resetClosureDialog()">&nbsp;
                                    <!--@row-click="handleSelectionChange"-->
                                    <el-table
                                            :data="closureList"
                                            width="100%"
                                    >
                                        <el-table-column type="index" align="center" label="序号" width="150" />
                                        <!--<el-table-column-->
                                        <!--        prop="id"-->
                                        <!--        label="id"-->
                                        <!--        width="150"-->
                                        <!--        align="center">-->
                                        <!--</el-table-column>-->
                                        <el-table-column
                                                prop="name"
                                                label="名称"
                                                width="200"
                                                align="center">
                                        </el-table-column>
                                        <el-table-column
                                                prop="user"
                                                label="提交者"
                                                width="150"
                                                align="center">
                                        </el-table-column>
                                        <el-table-column
                                                prop="time"
                                                label="提交时间"
                                                width="150"
                                                align="center">
                                        </el-table-column>
                                        <el-table-column
                                                label="下载"
                                                width="170"
                                                align="center">
                                            <template slot-scope="scope">
                                                <el-button  type="primary" icon="el-icon-edit" size="mini" @click="download(scope.row)">下载</el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </el-dialog>
                            </div>
                            <!--分页控件-->
                            <el-pagination
                                    :current-page="currentPage"
                                    :page-sizes="[10,15,20,30,40]"
                                    :page-size="100"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="totalNum"
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    style="text-align: center"
                            />
                            <br>
                            <br>
                        </div>
                        <!--图表-->
                        <!--柱状图展示-->
                        <div style="margin-top: 30px">
                            <div id="barchartOfAlarm"></div>
                            <div id="piecharOfAlarm"></div>
                        </div>
                    </div>
                </el-main>
            </el-container>
            <vFootSpace />
        </el-container>
    </el-container>
</template>

<script>
    import axios from 'axios'
    export default {
        name: 'HistoricalAlarm',
        data() {
            return {
                pickerOptions: {

                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                            picker.$emit('pick', [start, end])
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                            picker.$emit('pick', [start, end])
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                            picker.$emit('pick', [start, end])
                        }
                    }]
                }, // 日期的时间选择器
                tableHeight: 0.754*document.body.clientHeight,
                checkList: [], // 严重性选择
                tableData: [], // 表格内部的数据
                pictLoading: false,
                currentPage: 1,
                pageNum: 10, // 每页展示多少数据
                chooseTime: [], // 日期时间选择
                centerDialogVisible: false, // 对话框
                hostId: '', // 选择的主机
                chooseHosts: [], // 用户选择的主机列表
                totalNum: 0, // 数据总条数
                severity_detail: '', // 模态框中严重性
                acknowledged_detail: '', // 模态框中的是否知晓
                source_detail: '', // 模态框的来源
                clock_detail: '', // 模态框中的事件起始时间
                r_clock_detail: '', // 模态框中的恢复时间
                description_detail: '', // 模态框中问题的具体描述
                chartData: [], // 柱状图数据
                online_host_list: [],
                hostIds: [],    //主机的ID编号
                solution: '',// 模态框中问题的解决方案
                startTime: '',
                endTime: '',
                //推送的知识列表
                pushKnowledgelist:[],
                // 知识推送对话框的可见性
                pushDialogdialogVisible: false,
                //新增知识表单
                addFromData: {
                    knowledgeName: '',
                    labelName: '',
                    type: '',
                    alertKey: '',
                    description: '',
                    approval: '',
                },
                // 新增知识表单可见性
                addDialogFormVisible:false,
                // 上传参数
                upload: {
                    // 是否禁用上传
                    isUploading: false,
                    // 设置上传的请求头部
                    // headers: {Authorization: "Bearer " + getToken()},
                    // 上传的地址
                    url: '/fileManager/uploadfile',
                    // 上传的文件列表
                    fileList: [],
                },
                // 上传文件的url
                uploadUrl: '/fileManager/uploadfile',
                // 校验规则
                rules: {

                    knowledgeName: [{ required: true, message: '知识名称为必填项', trigger: 'blur' }],

                    labelName:[{ required: true, message: '标签名称为必填项', trigger: 'blur' }],

                    type: [{ required: true, message: '类型为必填项', trigger: 'blur' }],

                    alertKey:[{ required: true, message: '键值为必填项', trigger: 'blur' }],

                    description: [{required: false ,trigger: 'blur',type: 'string'},
                        {pattern: /^.{0,2048}$/m,message: '长度为0-2048位'}],
                },
                isSearching: false,
                // 附件详情可见性
                closureDialogvisiable: false,
                //附件详情列表
                closureList: [],
                // 知识分类
                typeOptions: [],
                // 知识分类query
                queryInfo: {
                    type: 3
                },
                // 知识分类的value->label
                knowledgeTypeList: [],
                // 推送知识总数
                push_total: 0,
                // 推送知识页面大小
                push_page_size: 5,
                // 推送知识当前页面
                push_knowledge_current_page: 1,
            }
        },
        mounted() {
            this.getAllKnowledgeType()
            //如果是直接菜单栏点进来就是原来的，后面修改的话，直接把if里面的三条拿出来，然后把其他的删掉
            if ( this.$route.fullPath == '/HistoricalAlarm') {
                this.handleSubmit();
                this.getHostList();
                this.getChartsData();
            }else {//这是从首页饼图跳转过来，然后以后修改直接删除
                this.echartTo();
                this.getHostList();
                this.getChartsData();
            }

            // this.handleSubmit();
            // this.getHostList();
            // this.getChartsData();
        },
        watch:{
            // 不断地监听图表中的数据是否改变
            chartData(val,oldVal) {
                console.log(val)
                this.drawBarChart(val);
                this.drawPieChart(val);
            }
        },
        methods: {
            //时间选择后再加载数据
            loadMethods(){
                console.log(this.chooseTime)
                this.handleSubmit();
                this.echartTo();
                this.getChartsData();
            },
            //从饼图哪里跳转过来
            echartTo(){
                var loc = location.href;
                var n1 = loc.length;//地址的总长
                var n2 = loc.indexOf("?");//取得=号的位置
                var parameter = decodeURI(loc.substr(n2+1, n1-n2));
                var m1 = parameter.length;//获得每个键值对的长度
                var m2 = parameter.indexOf("=");//获得每个键值对=号的位置
                var value = parameter.substr(m2+1, m1-m2);//获取每个键值对=号后面具体的值
                console.log("value"+value)
                this.$set(this.checkList,0,value)
                const _this = this
                let tim;
                if(!_this.chooseTime || _this.chooseTime.length == 0){
                    tim = new Date().getTime()-3600*1000*24*365*10 + "," + new Date().getTime()
                }else {
                    tim =(new Date(_this.chooseTime[0])).getTime()+','+(new Date(_this.chooseTime[1])).getTime()
                }
                console.log('time:'+_this.chooseTime.toString())
                axios({
                    methods: 'get',
                    url: '/problem/get_history_problem.action',
                    params: {
                        host_ids: _this.hostIds.toString(), // hostId
                        check_list: _this.checkList.toString(), // severity
                        time_of_severity: tim, // severity between a to b
                        current_page: _this.currentPage,
                        page_size: _this.pageNum
                    }
                }).then((res) => {
                    _this.pictLoading = false;
                    console.log(res);
                    this.pictLoading = false
                    if (res.data.content.result == null) {
                        _this.tableData = []
                    } else {
                        _this.tableData = res.data.content.result
                        _this.totalNum = res.data.content.data_num
                    }
                })
            },

            // 提交请求后台刷新表格数据
            handleSubmit(isPage) {
                const _this = this
                if(!isPage) {  // 如果不是分页切换，从第1页开始
                  _this.currentPage = 1
                }
                _this.pictLoading=true;
                let tim;
                if(!_this.chooseTime || _this.chooseTime.length == 0){
                    tim = new Date().getTime()-3600*1000*24*365*10 + "," + new Date().getTime()
                }else {
                    tim =(new Date(_this.chooseTime[0])).getTime()+','+(new Date(_this.chooseTime[1])).getTime()
                }
                // console.log(_this.hostIds.toString())
                axios({
                    methods: 'get',
                    url: '/problem/get_history_problem.action',
                    params: {
                        host_ids: _this.hostIds.toString(), // hostId
                        check_list: _this.checkList.toString(), // severity
                        time_of_severity: tim, // severity between a to b
                        current_page: _this.currentPage,
                        page_size: _this.pageNum
                    }
                }).then((res) => {
                    _this.pictLoading = false;
                    this.pictLoading = false
                    if (!res.data) {
                        _this.tableData = []
                    } else {
                        _this.tableData = res.data.content.result
                        _this.totalNum = res.data.content.data_num
                    }
                    this.getChartsData();
                })
            },
            // 控制表格每页展示多少数据
            handleSizeChange(val) {
                this.pageNum = val;
                console.log(val);
                this.handleSubmit();
            },
            // 控制当前页的转换
            handleCurrentChange(val) {
                this.currentPage = val;
                this.handleSubmit(true);
            },
            // 展示模态框，数据的详情
            showProblem(val) {
                axios({
                    methods: 'get',
                    url: '/problem/get_solution.action',
                    params: {
                        event_id: val.eventid.toString(), // eventId
                    }
                }).then((res) =>{
                    this.solution = res.data.content.result.message
                }).catch(function (error){
                    console.log(error)
                })
                this.source_detail = val.source
                this.severity_detail = val.severity
                this.acknowledged_detail = val.acknowledged
                this.clock_detail = val.clock
                this.r_clock_detail = val.r_clock
                this.description_detail = val.name
                // 弹出模态框
                this.centerDialogVisible = true
            },
            // 获取数据，更新图表中的数据
            getChartsData() {
                console.log("开始");
                let _this = this;
                _this.chartData = [];
                console.log(_this.chooseTime);
                let tim;
                if(!_this.chooseTime || _this.chooseTime.length == 0){
                    tim = new Date().getTime()-3600*1000*24*365*10 + "," + new Date().getTime()
                }else {
                    tim =(new Date(_this.chooseTime[0])).getTime()+','+(new Date(_this.chooseTime[1])).getTime()
                }
                axios({
                    methods: 'get',
                    url: '/problem/get_history_problem_count.action',
                    params:{
                        host_ids: _this.hostIds.toString(), // hostId
                        check_list: _this.checkList.toString(), // severity
                        time_of_severity: tim //time
                    }
                }).then((res) => {
                    console.log(res);
                    for(let i = 0; i < res.data.content.result.length; i++){
                        _this.chartData.push(res.data.content.result[i])
                    }
                }).catch(function (error){
                    console.log(error)
                })
            },
            // 获取主机列表
            getHostList() { // 获取主机列表
                let _this = this;
                _this.tohost = this.$route.params.host
                axios({
                    method: 'get',
                    url: '/demo/get_all_online_host.action'
                }).then(function (response) {
                    let resultList = response.data.content.result
                    _this.online_host_list = resultList;
                }).catch(function (error) {
                    console.log(error)
                })
            },
            // 绘制柱状图
            drawBarChart(val) {
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById("barchartOfAlarm"));
                // 请求后台数据
                // console.log(_this.barchartData);
                // 指定图表的配置项和数据
                let option = {
                    title: {
                        text: "历史告警信息柱状图展示"
                    },
                    tooltip: {},
                    legend: {
                        data: ["数量"]
                    },
                    xAxis: {
                        data: ["未分类", "信息类", "警告", "一般严重", "严重", "灾难"]
                    },
                    yAxis: {},
                    series: [
                        {
                            name: "数量",
                            type: "bar",
                            data: val,
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option,true);
            },
            // 绘制饼状图
            drawPieChart(val) {
                // console.log("饼状图的数据是:"+val);
                let myChart = this.$echarts.init(document.getElementById("piecharOfAlarm"));
                let option={
                    title : {
                        text: '历史告警统计饼状图',//主标题
                        subtext: '各个等级占比',//副标题
                        x:'center',//x轴方向对齐方式
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 10,
                        data: ['未分类','信息类','警告','一般严重','严重','灾难']
                    },
                    series: [
                        {
                            name: '数量统计',
                            type: 'pie',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: true
                            },
                            data: [
                                {value: val[0], name: '未分类'},
                                {value: val[1], name: '信息类'},
                                {value: val[2], name: '警告'},
                                {value: val[3], name: '一般严重'},
                                {value: val[4], name: '严重'},
                                {value: val[5], name: '灾难'},
                            ]
                        }
                    ]
                };
                myChart.setOption(option,true);
            },
            // 点击推送知识
            pushKnowledge(val) {
                axios.post('/trigger/getKnowledgeByID.action',
                    {triggerid:val.objectid})
                    .then((res) => {
                        if (res.data.status){
                            // console.log(res);
                            this.pushKnowledgelist = res.data.content.knowledgeList
                            this.push_total = this.pushKnowledgelist.length
                            this.pushDialogdialogVisible = true
                        }else{
                            this.$message.error("无相关知识,请录入！")
                        }
                    }).catch(() => {
                    this.$message.error("无相关知识,请录入！")
                });
            },
            // 录入新知识点击
            insertNewKnowledge(val){
                this.getKeyById(val.objectid)
            },
            // 根据告警项查询具体键值
            getKeyById(val){
                axios.post('/trigger/getKeyByID.action',
                    {triggerid:val})
                    .then((res) => {
                        // console.log(res);
                        if (res.data.status){
                            this.addFromData.alertKey = res.data.content.key;
                            this.addDialogFormVisible = true;
                        }else{
                            return this.$message.error("获取告警信息失败！")
                        }
                    }).catch(() => {
                    return this.$message.error("获取告警信息失败！")
                });
            },
            // 文件改变时
            fileChange(file, fileList) {
                this.upload.fileList = fileList
            },
            // 文件移除之前
            beforeRemove(file, fileList) {
                return this.$confirm(`确定移除 ${file.name}？`);
            },
            // 移除附件
            handleRemove(file, fileList) {
                this.upload.fileList = fileList
            },
            // 文件预上传格式限制
            beforeAvatarUpload(file) {
                // const isJPG = file.type === 'image/jpeg'
                // const isPng = file.type === 'image/png'
                // const isLt2M = file.size / 1024 / 1024 < 2
                //
                // if (!isJPG && !isPng) {
                //     this.$message.error('上传图片只能是 JPG或png 格式!')
                // }
                // if (!isLt2M) {
                //     this.$message.error('上传图片大小不能超过 2MB!')
                // }
                // return (isJPG || isPng) && isLt2M
            },
            // 录入知识对话框关闭事件
            addFormCancelClick() {
                this.addDialogFormVisible = false
                this.isSearching = false
                this.restAddForm()
            },
            // 重置增添知识表单
            restAddForm() {
                // this.backgroundColor="#827e87"
                this.addFromData = {
                    knowledgeName: '',
                    labelName: '',
                    type: '',
                    alertKey: '',
                    description: ''
                }
                this.upload.fileList = []
            },
            // 新增知识提交按钮
            submitForm(addFromData) {
                this.$refs[addFromData].validate(valid => {
                    if (valid) {
                        this.addFromData.approval = '待审批'
                        let formData = new FormData()
                        this.upload.fileList.forEach(file => {
                            formData.append('file', file.raw)
                        })
                        formData.append("submit_user",sessionStorage.getItem("username"))
                        formData.append("knowledgeName", this.addFromData.knowledgeName)
                        formData.append("labelName", this.addFromData.labelName)
                        formData.append("type", this.addFromData.type)
                        formData.append("alertKey", this.addFromData.alertKey)
                        formData.append("description", this.addFromData.description)
                        formData.append("approval", this.addFromData.approval)
                        axios.post('/konwledgeBase/createKonwledge.action', formData).then((res) => {
                            if (res.data.status) { // 执行成功
                                // 关闭新增窗口
                                this.addDialogFormVisible = false
                                // 弹出提示信息
                                this.$message({
                                    message: '知识录入成功！',
                                    type: 'success'
                                })
                                this.restAddForm()
                            } else { // 执行失败
                                // 弹出提示
                                this.$message.error('知识录入失败！')
                            }
                        })
                    }else {
                        return false;
                    }
                })
            },
            // 附件查看
            checkClosure(val) {
                axios.post('/fileManager/getClosureByID.action',
                    {id:val.id})
                    .then((res) => {
                        // console.log(res);
                        if (res.data.status){
                            // console.log(res.data.content.closures);
                            if (res.data.content.closures.length != 0){
                                for (let i = 0; i < res.data.content.closures.length; i++) {
                                    var file_id = res.data.content.closures[i].file_id
                                    var file_user = res.data.content.closures[i].submit_user
                                    var submit_time = res.data.content.closures[i].submit_time
                                    var file_dir = res.data.content.closures[i].file_dir
                                    var tempFile = res.data.content.closures[i].file_dir
                                    var tempName = tempFile.substring(tempFile.lastIndexOf("_") + 1)
                                    var name = tempName
                                    this.closureList.push({id:file_id,dir:file_dir,name:name,user:file_user,time:submit_time})
                                }
                                // console.log(this.closureList);
                                this.closureDialogvisiable = true
                            }else{
                                return this.$message.warning("当前知识无附件！")
                            }
                        }else{
                            return this.$message.error("查看附件失败！")
                        }
                    }).catch(() => {
                    this.$message.error("查看附件失败！")
                });
            },
            // 下载附件
            download(val) {
                // console.log('val',val)
                this.$confirm('确认下载该附件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios({
                        method:'post',
                        url:'/fileManager/download2.action',
                        data:val,
                        // 二进制流文件，一定要设置成blob，默认是json
                        responseType: 'blob'
                    }).then((res)=> {
                        // console.log(res)
                        let link = document.createElement("a");
                        link.style.display = "none";
                        link.href = window.URL.createObjectURL(new Blob([res.data]));
                        // link.setAttribute("download",row.zurl.substring(row.zurl.lastIndexOf("/")+1));//文件名
                        link.setAttribute("download",val.name);//文件名
                        document.body.appendChild(link);
                        link.click();
                        URL.revokeObjectURL(link.href);
                        document.body.removeChild(link);
                    })
                }).catch((error) => {
                    console.log(error)
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    })
                })
            },
            // 重置 附件列表
            resetClosureDialog(){
                this.closureList = []
            },
            // 获取分类列表
            getAllKnowledgeType(){
                axios.post('/konwledgeBase/get_all_type.action', {params: this.queryInfo}).then((res) => {
                    if (res.data.status) { // 执行成功
                        this.typeOptions = res.data.content.result
                        this.getTreeData(this.typeOptions)
                        // console.log(this.typeOptions)
                    } else { // 执行失败
                        // 弹出提示
                        this.$message.error('获取知识类型失败！')
                    }
                })

            },
            // 知识类型的切换时的事件
            typeHandleChange(val) {
                console.log(val);
            },
            // 递归函数
            getTreeData(datas) {
                for(var i in datas){
                    var id = datas[i].typeId
                    var name = datas[i].typeName
                    this.knowledgeTypeList.push({id:id,name:name})
                    if(datas[i].children){
                        this.getTreeData(datas[i].children);
                    }
                }
            },
            //获取具体知识类型
            getKnowledgeType(typeStr) {
                var lastType = typeStr.substring(typeStr.lastIndexOf(',')+1)
                for (let i = 0; i < this.knowledgeTypeList.length; i++) {
                    if (this.knowledgeTypeList[i].id == lastType){
                        return this.knowledgeTypeList[i].name
                    }
                }
            },
            //
            push_current_change(currentPage){
                //换页
                // 设置最新的页码
                this.push_knowledge_current_page = currentPage
                console.log("currentPage",currentPage)
            }
        },
        computed: {
            // 计算当页的触发器
            currentPagePush: function () {
                let start = (this.push_knowledge_current_page - 1) * this.push_page_size
                let end = start + this.push_page_size
                if (end >= this.pushKnowledgelist.length)
                    end = this.pushKnowledgelist.length
                //截取字符串
                return this.pushKnowledgelist.slice(start, end);
            },
        }
    }
</script>

<style scoped>
    .main{
        height: 88vh;
        width: 100%;
        margin-top: 60px;
        padding:10px;
    }

    #barchartOfAlarm{
        width: 500px;
        height: 300px;
        float: left;
    }
    #piecharOfAlarm{
        width: 500px;
        height: 300px;
        float: left;
        margin-left: 5%;
    }
    .el-row {
        margin-bottom: 5px;
    }
    .el-col {
        border-radius: 4px;
    }
    .bg-purple-dark {
        background: #99a9bf;
    }
    .bg-purple {
        background: #d3dce6;
    }
    .bg-purple-light {
        background: #e5e9f2;
    }
    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }
    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }
    .content{
        height: 97%;
        width: 100%;
        margin-top: 0;
    }

</style>
